<template>
	<view class="container">
		<view class="top">
			<navigator url="/pages/zwj/cheliangweixiu/cheliangweixiu">
				<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
			</navigator>
			<view class="title">车辆维修</view>
		</view>
		<view style="margin-top: -200rpx;">
			<uni-card>
				<image class="image" :src="image" mode=""></image>
				<view class="carView">
					<view class="carItem1">
						<view>{{ merchant.name }}</view>
						<uni-rate :size="16" :value="merchant.rate" :readonly="true" />
						<view>最高评分：{{merchant.rate}}分</view>
						<view>营业时间：{{merchant.startTime}}-{{merchant.endTime}}</view>
						<view>位置：{{merchant.address}}</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-card>
				<view class="fwView">
					<view>维修项目</view>
					<view class="fwItem">
						<view>工时价格</view>
						<view>￥ 35.9</view>
						<view>￥ 45.9</view>
					</view>
					<view class="fwItem">
						<view>轮胎维修</view>
						<view>￥ 79.9</view>
						<view>￥ 99.9</view>
					</view>
					<view class="fwItem">
						<view>车灯维修</view>
						<view>￥ 79.9</view>
						<view>￥ 89.9</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="comment-container">
			<view class="comment-title">用户评价</view>
			<view class="pjItem" v-for="(item, index) in comments" :key="index">
				<image class="img" :src="item.userInfo.avatar"></image>
				<view class="pj">
					<view>{{ item.userInfo.userName || '匿名用户' }}</view>
					<uni-rate :size="16" :value="item.score" :readonly="true" />
					<view>{{ item.commentTime }}</view>
					<view>{{ item.comment }}</view>
				</view>
			</view>
		</view>
		<view class="goods-carts">
			<button class="yyBtn" @click="booking">立即预约</button>
		</view>
	</view>
</template>

<script>
	import request from '../../../uitls/request';
	// import requestPromise from '../../../uitls/requestPromise.js';
	export default {
		data() {
			return {
				merchantId: '',
				merchant: {},
				merchantImage: [],
				image: '',
				comments: []
			}
		},
		methods: {
			getMerchant() {
				const that = this
				request({
					url: '/merchant/merchant/' + this.merchantId,
					method: 'GET',
					success: (res) => {
						that.merchant = res.data.data
					}
				})
			},
			getMerchantImage() {
				const that = this;
				request({
					url: '/merchant/imgs/6',
					method: 'GET',
					success: (res) => {
						that.merchantImage = res.data.data
						that.image = that.merchantImage[0].img
					}
				})
			},
			getComment() {
				const that = this;
				request({
					url: '/evaluate/evaluate/list',
					method: 'GET',
					data: {
						merchantId: that.merchantId
					},
					success: async (res) => {
						const commentList = res.data.rows;
						console.log(commentList)
						// 等待所有 userInfo 请求完成
						const commentWithUserInfo = await Promise.all(commentList.map(async comment => {
							try {
								const userRes = await new Promise((resolve, reject) => {
									request({
										url: '/bigbase/info/' + comment.userId,
										method: 'GET',
										success: resolve,
										fail: reject
									});
								});
								comment.userInfo = userRes.data.data;
							} catch (error) {
								comment.userInfo = null;
							}
							return comment;
						}));
						that.comments = commentWithUserInfo;
					}
				});
			},
			booking() {
				uni.navigateTo({
					url: `/pages/zwj/lijiyuyue/lijiyuyue?id=${this.merchantId}`
				})
			}
		},
		onLoad(options) {
			this.merchantId = options.id;
			this.getMerchant();
			this.getMerchantImage();
			this.getComment();
		}
	}
</script>

<style scoped>
	.container {
		padding-bottom: 30rpx;
	}

	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		padding-top: 20px;
	}

	image {
		width: 610rpx;
		height: 350rpx;
		padding-top: 10rpx;
	}

	.carView {
		margin-top: 35rpx;
		margin-bottom: 22rpx;

	}

	.carItem1>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.carItem1>view:nth-child(3) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(4) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(5) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(6) {
		font-size: 22rpx;
		color: royalblue;
		font-weight: bold;
	}

	.fwView>view:nth-child(1) {
		font-size: 33rpx;
		font-weight: bold;
		margin: 20rpx 0rpx;
	}

	.fwItem {
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.fwItem>view:nth-child(1) {
		font-size: 25rpx;
		font-weight: bold;
	}

	.fwItem>view:nth-child(2) {
		font-size: 28rpx;
		color: red;
		margin-left: 300rpx;
	}

	.fwItem>view:nth-child(3) {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 30rpx;
	}

	.pjView>view:nth-child(1) {
		font-size: 33rpx;
		font-weight: bold;
		margin: 20rpx 0rpx;
	}

	.pjItem {
		height: 180rpx;
		display: flex;
		margin-top: 25rpx;
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 40rpx;
	}

	.pj {
		width: 300rpx;
		margin-left: 30rpx;
	}

	.pj>view:nth-child(1) {
		font-size: 25rpx;
		font-weight: bold;
	}

	.pj>view:nth-child(3) {
		font-size: 20rpx;
	}

	.pj>view:nth-child(4) {
		font-size: 25rpx;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-left: 50rpx;
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.comment-container {
		width: 87%;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.comment-title {
		font-size: 35rpx;
		font-weight: bold;
		color: #6a6a6a;
		margin-top: 10rpx;
		margin-left: 14rpx;
	}

	.yyBtn {
		border-radius: 30rpx;
		width: 80%;
		background-color: aqua;
	}
</style>